<template>
  <view class="chat-container">
    <!-- 1. 顶部导航栏：动态显示HR和公司信息 -->
    <view class="chat-nav">
      <view class="nav-back" @click="goBack">
        <image src="/static/icons/left.png" class="back-icon"></image>
      </view>
      <view class="nav-title">
        <text class="hr-name">{{ hrName || '招聘顾问' }}</text>
        <text class="company-tag">{{ companyName || '未知企业' }} · 招聘者</text>
      </view>
      <view class="nav-more">
        <image src="/static/icons/more.png" class="more-icon"></image>
      </view>
    </view>

    <!-- 2. 功能操作栏：公司详情/发简历/面试详情 -->
    <view class="chat-action">
      <view class="action-item" @click="goCompanyDetail">
        <image src="/static/icons/CompanyDetail.png" class="action-icon"></image>
        <text class="action-text">公司详情</text>
      </view>
      <view class="action-item" @click="goSendResume">
        <image src="/static/icons/SendResume.png" class="action-icon"></image>
        <text class="action-text">发简历</text>
      </view>
      
    </view>

    <!-- 3. 聊天内容区：WebSocket实时渲染消息 -->
    <view class="chat-content" ref="chatContent">
      <!-- 加载提示 -->
      <view class="loading-tip" v-if="isLoading">
        <text>加载聊天记录中...</text>
      </view>

      <!-- 空聊天提示 -->
      <view class="empty-tip" v-else-if="chatList.length === 0">
        <image src="/static/icons/empty-chat.png" class="empty-icon"></image>
        <text class="empty-text">还没有聊天记录，开始对话吧～</text>
      </view>

      <!-- 消息列表 -->
      <view class="message-list">
        <!-- 循环聊天列表的每一条消息 -->
        <view 
          class="message-item" 
          v-for="item in chatList" 
          :key="item.recordId"  
          :class="{ 'my-message': item.sendRole === 'user', 'hr-message': item.receiveRole !== 'hr' }"
        >
          <!-- 条件1：我的消息（头像在右，气泡在左） -->
          <template v-if="item.sendRole === 'user'">
            <view 
              class="message-wrap" 
              :class="{
                'resume-message': item.chat_type === 1,  // 简历消息样式
                'text-message': item.chat_type === 0     // 文字消息样式
              }"
            >
              <text class="message-content">{{ item.chatInfo }}</text>
            </view>
            <image src="/static/icons/avatar-me.png" class="avatar avatar-me"></image>
          </template>
      
          <!-- 条件2：HR消息（头像在左，气泡在右，带发送者名称） -->
          <template v-else>
            <image src="/static/icons/avatar-hr.png" class="avatar avatar-hr"></image>
            <view 
              class="message-wrap" 
              :class="{
                'interview-message': item.chat_type === 2,  // 面试预约消息样式
                'text-message': item.chat_type === 0        // 文字消息样式
              }"
            >
              <text class="message-sender">{{ hrName || '招聘顾问' }}</text>
              <text class="message-content">{{ item.chatInfo }}</text>
            </view>
          </template>
        </view>
      </view>
    </view>

    <!-- 4. 输入发送区：常用语+输入框+发送按钮 -->
    <view class="chat-input">
      <view class="common-words" @click="showCommonWords">
        <text>常用语</text>
      </view>
      <input 
        class="input-box" 
        v-model="inputValue" 
        placeholder="请输入消息内容" 
        @confirm="sendMessage"
      />
      <view class="send-btn" @click="sendMessage" :class="{ disabled: !inputValue.trim() }">
        <text>发送</text>
      </view>
    </view>
  </view>
</template>

<script>
	import state from '../../store/state';
	import {getConcretChat,write} from '@/api/chat.js'
export default {
  data() {
    return {
		msg: {
		        sendRole: "user",
		        sendId: state.userInfo.userId,
		        receiveRole: "hr",
		        receiveId: '',
		        chatInfo: "",
		        chatType: 0,
		        isRead: 0
		      },
      // 列表页传递的参数
      hrId: '',        // HR唯一标识
      hrName: '',      // HR姓名
      companyId: '',   // 公司ID
      companyName: '', // 公司名称
	  userId: '',
      
      // 聊天相关数据
      inputValue: '',  // 输入框内容
      chatList: [],    // 聊天消息列表
      isLoading: true, // 加载状态
	  webSocket:null,
	  isWebSocketConnected: false, // WebSocket连接状态
	  reconnectTimer: null,    // 重连定时器
	  
	  selectedFileUrl: '', // 存储选中的简历链接
	  resumeListWithFileUrl: [] // 存储全局的简历列表（含 fileUrl）
    }
  },
  onLoad(options) {
	  //加载用户信息
	  this.loadUserInfo();
    // 1. 接收并解析列表页参数（处理中文编码）
	this.msg.receiveId = options.hrId || '';
    this.hrId = options.hrId || '';
    this.hrName = options.hrName || '';
    this.companyId = options.companyId || '';
    this.companyName = options.companyName || '';
	this.createWebSocket()
	this.loadHistoryChat();
	
	// 2. 从全局状态获取所有简历的 fileUrl（供选择）
	  if (state.resumeListWithFileUrl && state.resumeListWithFileUrl.length > 0) {
	    this.resumeListWithFileUrl = state.resumeListWithFileUrl;
	  }
	  
  },
  onUnload() {
	  
    // 页面卸载时关闭WebSocket
    if (this.webSocket && this.webSocket.readyState === WebSocket.OPEN) {
      this.webSocket.close(1000, '页面关闭');
    }
  },
  methods: {
	  // 改造后的“发简历”方法：弹出选择框并发送简历链接
	  goSendResume() {
	    // 1. 基础校验：HR/公司信息缺失时提示
	    if (!this.hrId || !this.companyId) {
	      uni.showToast({ title: '信息缺失，无法发送', icon: 'none' });
	      return;
	    }
	  
	    // 2. 校验全局简历列表：无简历时提示并跳转上传页
	    if (!state.resumeListWithFileUrl || state.resumeListWithFileUrl.length === 0) {
	      uni.showModal({
	        title: '暂无简历',
	        content: '您还没有上传简历，是否立即前往上传？',
	        confirmText: '去上传',
	        cancelText: '取消',
	        success: (res) => {
	          if (res.confirm) {
	            // 跳转简历上传页（根据你的项目路径调整）
	            uni.navigateTo({ url: '/pages/zj/AttachedResume' });
	          }
	        }
	      });
	      return;
	    }
	  
	    // 3. 有简历：构造选择框的“简历名称列表”
	    const resumeOptions = state.resumeListWithFileUrl.map(item => {
	      // 显示“简历名称 + 上传时间”，方便用户区分
	      return `${item.name}（${this.formatTime(new Date(item.uploadTime))}）`;
	    });
	  
	    // 4. 弹出选择框，让用户选择要发送的简历
	    uni.showActionSheet({
	      itemList: resumeOptions,
	      title: '选择要发送的简历', // 选择框标题
	      success: (selectRes) => {
	        // 5. 获取选中的简历对象（含fileUrl）
	        const selectedResume = state.resumeListWithFileUrl[selectRes.tapIndex];
	        // 6. 发送简历链接给HR（调用封装的发送方法）
	        this.sendResumeUrlToHR(selectedResume.fileUrl, selectedResume.name);
	      },
	    
	    });
	  },
	  
	  // 新增：发送简历链接给HR的封装方法
	  sendResumeUrlToHR(fileUrl, fileName) {
	    // 1. 构造消息内容：带友好提示，HR可直接点击链接
	    const msgContent = `您好，这是我的简历，点击查看`;
	  
	    // 2. 复用原有msg对象，赋值消息内容
	    this.msg.chatInfo = msgContent;
	    // 可选：标记消息类型为“简历链接”（若后端支持chatType区分，可调整）
	    this.msg.chatType = 1; // 1=简历链接，0=普通文本（根据后端定义调整）
	  
	    // 3. 调用原有write接口发送消息
	    write(this.msg).then(res => {
	      if (res.code === 200) {
	        uni.showToast({ title: '简历链接发送成功', icon: 'success' });
	        // 4. 刷新聊天记录并滚动到底部
	        this.loadHistoryChat();
	        this.msg.chatInfo = ""; // 清空消息内容
	        this.scrollToBottom();
	      } else {
	        uni.showToast({ title: res.msg || '发送失败', icon: 'none' });
	      }
	    }).catch(e => {
	      console.error('发送简历链接失败：', e);
	      uni.showToast({ title: '网络错误，发送失败', icon: 'none' });
	    });
	  },
    
    // 发送消息
    sendMessage() {
      const content = this.inputValue.trim();
      if (!content) return;
	  this.msg.chatInfo = content
	  write(this.msg).then(res =>{
		  this.loadHistoryChat();
		   this.msg.chatType = 0; // 文字消息类型
		  this.msg.chatInfo = ""
	  })

      // 本地先渲染（优化体验）
      this.inputValue = '';
      this.scrollToBottom();
    },
	// 加载用户信息（打开页面时获取）
	loadUserInfo() {
		console.log('获取用户信息');
		 if (!state.userInfo) {
		    setTimeout(() => {
		          this.loadUserInfo(); // 执行你的方法
		        }, 2000);
					return;
		  }
			  console.log('获取用户信息成功');
			  this.userId = state.userInfo.userId;
			  
	},

		createWebSocket(){
		  // 如果已经连接或正在重连，则不再创建新连接
		 if (this.isWebSocketConnected || this.reconnectTimer){
			 console.log('已连接');
			 return;
		 } 
		 this.webSocket = new WebSocket(`ws://127.0.0.1:7060/ws?role=user&id=${this.userId}`);
		 console.log('WebSocket开始连接');
		 // 连接成功
		  this.webSocket.onopen = () => {
		  console.log('WebSocket连接成功');
		    this.isWebSocketConnected = true;
		     clearTimeout(this.reconnectTimer);
		  };
		  
		  // 后端socket发送消息的监听器
		  this.webSocket.onmessage = (event)=> {
		           if(event.data == "发送完成"){
					   this.loadHistoryChat(); 
				   }
		 };
				 
	  },
	  reconnectWebSocket() {
	    // 如果已经有重连定时器，则不再创建
	    if (this.reconnectTimer) return;
	    
	    console.log('准备重连WebSocket...');
	    // 3秒后尝试重连
	    this.reconnectTimer = setTimeout(() => {
	      this.reconnectTimer = null;
	      if (this.userInfo.userId) {
	        console.log('尝试重连WebSocket');
	        this.createWebSocket();
	      }
	    }, 3000);
	  },
    // ---------------------- 页面交互相关 ----------------------
    // 返回上一页（聊天列表）
    goBack() {
      uni.navigateBack({ delta: 1 });
    },

    // 跳转到公司详情页
    goCompanyDetail() {
      if (!this.companyId) {
        uni.showToast({ title: '公司信息缺失', icon: 'none' });
        return;
      }
      uni.navigateTo({
        url: `/pages/zcy/companyDetails?companyId=${this.companyId}&userId=${this.userId}`
      });
    },

   

    // 显示常用语面板
    showCommonWords() {
      uni.showActionSheet({
        itemList: [
          '请问这个岗位的工作地点在哪里？',
          '想了解下该岗位的薪资范围是多少？',
          '什么时候可以安排面试呢？',
          '麻烦发一下岗位的详细职责说明，谢谢～'
        ],
        success: (res) => {
          const words = [
            '请问这个岗位的工作地点在哪里？',
            '想了解下该岗位的薪资范围是多少？',
            '什么时候可以安排面试呢？',
            '麻烦发一下岗位的详细职责说明，谢谢～'
          ];
          this.inputValue = words[res.tapIndex];
        }
      });
    },


    // 加载历史聊天记录（示例：实际调用后端接口）
    loadHistoryChat() {
        this.isLoading = false;
		
		getConcretChat({
        "myRole": "user",
        "myId": this.userId,
        "yourRole": "hr",
        "yourRoleId": this.hrId
      }).then(res =>{
		  
		  if(res.code == 200){
			  // 若后端未推送历史记录，可手动请求后赋值
			this.chatList = res.data;
			console.log(this.chatList)
			 this.scrollToBottom();

			  
		  }
	  })
		   
    },

    // 时间格式化：显示 时分（如 14:30）
    formatTime(timeStr) {
      if (!timeStr) return '';
      const date = new Date(timeStr);
      const hour = String(date.getHours()).padStart(2, '0');
      const minute = String(date.getMinutes()).padStart(2, '0');
      return `${hour}:${minute}`;
    },
	//滚动到消息底部
	scrollToBottom() {
	  setTimeout(() => {
	    // 1. 查询聊天内容区的布局信息（高度、位置等）
	    uni.createSelectorQuery().in(this)
	      .select('.chat-content')
	      .boundingClientRect(rect => {
	        if (rect) {
	          // 2. 滚动到页面底部：scrollTop = 内容区总高度（rect.height）
	          // 注意：此方案依赖 .chat-content 是页面唯一滚动容器
	          uni.pageScrollTo({
	            scrollTop: rect.height, // 滚动到内容区最底部
	            duration: 0, // 无动画，瞬间滚动
	            success: () => {},
	            fail: (err) => console.error('滚动失败：', err)
	          });
	        }
	      })
	      .exec(); // 必须执行查询
	  }, 50);
	}
  }
}
</script>

<style scoped>
/* 1. 页面容器：全屏布局基础样式 */
.chat-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa; /* 页面背景色，柔和不刺眼 */
}

/* 2. 顶部导航栏样式 */
.chat-nav {
  height: 44px; /* 导航栏固定高度，符合移动端习惯 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px; /* 左右内边距，避免内容贴边 */
  background-color: #fff; /* 白色背景，清晰分隔 */
  border-bottom: 1px solid #eee; /* 底部细线，视觉分隔 */
}
/* 导航栏-返回按钮容器 */
.nav-back {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center; /* 图标居中 */
}
/* 返回图标 */
.back-icon {
  width: 20px;
  height: 20px;
  object-fit: contain; /* 保持图标比例 */
}
/* 导航栏-标题容器 */
.nav-title {
  display: flex;
  flex-direction: column;
  align-items: center; /* 标题文字居中 */
}
/* HR姓名文字 */
.hr-name {
  font-size: 16px;
  font-weight: 600; /* 加粗，突出姓名 */
  color: #333; /* 深灰色，清晰易读 */
}
/* 公司信息文字 */
.company-tag {
  font-size: 12px;
  color: #999; /* 浅灰色，次要信息 */
  margin-top: 2px; /* 与姓名拉开微小距离 */
}
/* 导航栏-更多按钮容器 */
.nav-more {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center; /* 图标居中 */
}
/* 更多图标 */
.more-icon {
  width: 20px;
  height: 20px;
  object-fit: contain; /* 保持图标比例 */
}

/* 3. 功能操作栏样式（公司详情/发简历/面试详情） */
.chat-action {
  height: 50px; /* 功能栏固定高度 */
  display: flex;
  align-items: center;
  justify-content: space-around; /* 三个功能项均匀分布 */
  background-color: #fff; /* 白色背景，与导航栏呼应 */
  border-bottom: 1px solid #eee; /* 底部细线，分隔内容区 */
}
/* 单个功能项容器 */
.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 图标+文字居中 */
}
/* 功能项图标 */
.action-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 4px; /* 图标与文字拉开距离 */
  object-fit: contain;
}
/* 功能项文字 */
.action-text {
  font-size: 12px;
  color: #333; /* 深灰色，清晰可读 */
}

/* 4. 聊天内容区样式（核心区域） */
.chat-content {
  flex: 1; /* 占满剩余高度，自适应屏幕 */
  padding: 16px; /* 上下左右内边距，避免消息贴边 */
  overflow-y: auto; /* 内容超出时可滚动 */
  scrollbar-width: none; /* 隐藏滚动条（美观） */
}
/* 聊天内容区-加载提示 */
.loading-tip {
  width: 100%;
  text-align: center;
  padding: 20px 0; /* 上下内边距，居中显示 */
  color: #999;
  font-size: 14px;
}
/* 聊天内容区-空状态提示 */
.empty-tip {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0; /* 上下大间距，突出空状态 */
}
/* 空状态图标 */
.empty-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 16px; /* 图标与文字间距 */
  opacity: 0.5; /* 半透明，弱化次要元素 */
  object-fit: contain;
}
/* 空状态文字 */
.empty-text {
  color: #999;
  font-size: 14px;
}

/* 聊天内容区-消息列表容器 */
.message-list {
  width: 100%;
}
/* 单个消息项容器 */
.message-item {
  display: flex;
  margin-bottom: 16px; /* 消息之间的间距 */
  max-width: 100%; /* 避免超出屏幕 */
}
/* 我的消息：右对齐布局 */
.my-message {
  flex-direction: row-reverse;
}
/* HR消息：左对齐布局 */
.hr-message {
  flex-direction: row;
}

/* 消息项-头像样式 */
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%; /* 圆形头像，符合社交场景习惯 */
  margin: 0 8px; /* 头像与消息气泡的间距 */
  object-fit: cover; /* 头像图片填充，避免拉伸变形 */
}
/* 我的头像：仅右侧间距（因右对齐） */
.avatar-me {
  margin-left: 8px;
  margin-right: 0;
}
/* HR头像：仅左侧间距（因左对齐） */
.avatar-hr {
  margin-right: 8px;
  margin-left: 0;
}

/* 消息项-气泡容器（包含发送者、内容、时间） */
.message-wrap {
  display: flex;
  flex-direction: column;
  max-width: 70%; /* 消息气泡最大宽度，避免过宽影响阅读 */
}
/* HR消息-发送者姓名（仅HR消息显示） */
.message-sender {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px; /* 姓名与气泡的间距 */
}
/* 消息气泡核心样式 */
.message-content {
  padding: 10px 14px; /* 气泡内边距，文字不贴边 */
  border-radius: 18px; /* 圆角，柔和美观 */
  font-size: 14px;
  line-height: 1.4; /* 行高，提升文字可读性 */
  word-wrap: break-word; /* 长文字自动换行，避免超出气泡 */
}
/* 我的消息气泡：蓝色背景+白色文字 */
.my-message .message-content {
  background-color: #409eff; /* 主题蓝色，区分自己的消息 */
  color: #fff;
  border-top-right-radius: 4px; /* 右上角小圆角，模拟气泡指向自己 */
}
/* HR消息气泡：白色背景+阴影 */
.hr-message .message-content {
  background-color: #fff;
  color: #333;
  border-top-left-radius: 4px; /* 左上角小圆角，模拟气泡指向HR */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 轻微阴影，提升层次感 */
}

/* 消息项-时间文字 */
.message-time {
  font-size: 10px; /* 小字体，次要信息不抢焦点 */
  color: #999;
  margin-top: 4px; /* 与气泡的间距 */
  text-align: right; /* 我的消息时间右对齐 */
}
/* HR消息时间：左对齐 */
.hr-message .message-time {
  text-align: left;
}

/* 5. 输入发送区样式 */
.chat-input {
  height: 56px; /* 输入区固定高度 */
  display: flex;
  align-items: center;
  padding: 0 16px; /* 左右内边距 */
  background-color: #fff; /* 白色背景，与功能栏呼应 */
  border-top: 1px solid #eee; /* 顶部细线，分隔内容区 */
}
/* 输入区-常用语按钮 */
.common-words {
  padding: 6px 12px; /* 按钮内边距，点击区域适中 */
  background-color: #f0f2f5; /* 浅灰色背景，区分按钮 */
  border-radius: 16px; /* 圆角按钮，柔和美观 */
  margin-right: 10px; /* 与输入框的间距 */
}
/* 常用语文字 */
.common-words text {
  font-size: 14px;
  color: #333;
}
/* 输入区-输入框 */
.input-box {
  flex: 1; /* 输入框占满剩余宽度 */
  height: 36px; /* 输入框固定高度 */
  background-color: #f0f2f5; /* 浅灰色背景，区分输入区域 */
  border-radius: 18px; /* 大圆角，与消息气泡呼应 */
  padding: 0 16px; /* 左右内边距，文字不贴边 */
  font-size: 14px;
  color: #333;
  border: none; /* 清除默认边框 */
  outline: none; /* 清除聚焦边框 */
}
/* 输入框占位符样式 */
.input-box::placeholder {
  color: #999;
  font-size: 14px;
}
/* 输入区-发送按钮 */
.send-btn {
  width: 60px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center; /* 文字居中 */
  background-color: #409eff; /* 主题蓝色，突出发送按钮 */
  color: #fff;
  border-radius: 18px; /* 圆角，与输入框呼应 */
  margin-left: 10px; /* 与输入框的间距 */
  font-size: 14px;
}
/* 发送按钮-禁用状态（输入为空时） */
.send-btn.disabled {
  background-color: #c6e2ff; /* 浅蓝灰色，区分禁用状态 */
  cursor: not-allowed; /* 鼠标样式提示禁用 */
}
/* 我的消息样式区分 */
.my-message .message-wrap.text-message {
  background-color: #409eff; /* 原有文字消息蓝色 */
  color: #fff;
}

.my-message .message-wrap.resume-message {
  background-color: #e8f5e9; /* 简历消息浅绿色 */
  color: #333;
  border: 1px solid #c8e6c9;
}

/* HR消息样式区分 */
.hr-message .message-wrap.text-message {
  background-color: #fff; /* 原有文字消息白色 */
  color: #333;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.hr-message .message-wrap.interview-message {
  background-color: #fff3e0; /* 面试预约消息浅橙色 */
  color: #333;
  border: 1px solid #ffe0b2;
}

/* 统一调整气泡圆角（保持原有设计） */
.my-message .message-wrap {
  border-top-right-radius: 4px;
}

.hr-message .message-wrap {
  border-top-left-radius: 4px;
}
</style>